<template>
<footer class="common-footer">
  <div class="item" v-for="item in list">
    <router-link :to="item.tar" activeClass="active" exact>
      <i class="iconfont" :class="item.cla"></i>
      <span class="word">{{item.tarname}}</span>
    </router-link>
  </div>
  <div class="item" @click="intercept()" id="123">
    <router-link :to="mine.tar" activeClass="active" exact>
      <i class="iconfont" :class="mine.cla"></i>
      <span class="word">{{mine.tarname}}</span>
    </router-link>
  </div>
</footer>
</template>

<script>
import axios from "axios"
export default {
  name: 'footmenu',
  data() {
    return {
      list: [

        {
          tarname: "首页",
          tar: "/",
          cla: "icon-shouye"
        },
        {
          tarname: "榜单",
          tar: "/leaderboard/total",
          cla: "icon-jiangbei"
        },
        {
          tarname: "分类",
          tar: "/gameType",
          cla: "icon-fenlei"
        }
      ],
      mine: {
        tarname: "我的",
        tar: "//",
        cla: "icon-wode"
      }
    }
  },
  methods: {
    intercept() {
      axios.get("/api/intercept")
      .then((res)=>{
        if(res.data.code){
          this.$router.history.push("/mine")
        }else{
          console.log("登录页")
          this.$router.history.push("/login")
        }
      })
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/iconfont.css";
.common-footer {
  position: relative;
  height: 49px;
  width: 100%;
  background-color: #fafafa;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.common-footer::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  border-top: 1px solid #ddd;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
.item{
  width: 25%;
  height: 100%;
}
.item a {
  float: left;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item>i {
  font-size: 20px;
}

.common-footer .item .active {
  color: #07b3ef;
}

.common-footer .item .word {
  font-size: 12px;
}
</style>
